<template>
  <div class="userLogin">
    <!-- 头部NavBar -->
    <div class="navBarBox">
      <NavBar title="登录" routerLink="/users">
        <div></div>
      </NavBar>
    </div>

    <!-- 登录表单 -->
    <div class="login_from">
      <p class="title">欢迎使用宠乐缘</p>
      <p class="subhead">宠物社交，分享生活</p>
      <!-- 验证码登录 -->
      <van-form @submit="onCodeFormSubmit" v-if="activeName === 'mobile'">
        <van-cell-group inset class="code-login-group group">
          <div class="formItem">
            <van-field
              v-model="mobileFiled"
              name="user_mobile"
              placeholder="请输入手机号"
            />
            <div class="error" v-if="mobileError">{{ mobileError }}</div>
          </div>
          <div class="formItem">
            <van-field
              v-model="codeFiled"
              name="code"
              placeholder="请输入验证码"
            />
            <div class="error" v-if="codeError">{{ codeError }}</div>
          </div>

          <!-- 发送验证码按钮 -->
          <div class="send">发送验证码</div>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
        <div class="tab">
          <a
            v-if="activeName === 'mobile'"
            :class="{ active: activeName === 'account' }"
            @click="activeName = 'account'"
            href="javascript:"
            >账号登录</a
          >
          <!-- <span>新用户注册</span> -->
          <routerLink to="/register">
            <span>新用户注册</span>
          </routerLink>
        </div>

        <div class="agree">
          <div class="checkbox">
            <van-field name="checkbox">
              <template #input>
                <van-checkbox v-model="isAgreeFiled" shape="square"
                  ><span>我已阅读并同意</span>
                  <a href="javascript:">《隐私条款》</a>
                  <span>和</span>
                  <a href="javascript:">《服务条款》</a></van-checkbox
                >
              </template>
            </van-field>
            <div class="error-check" v-if="isAgreeError">
              {{ isAgreeError }}
            </div>
          </div>
        </div>
      </van-form>
      <!-- 账号登录 -->
      <van-form @submit="onAccountFormSubmit" v-if="activeName === 'account'">
        <van-cell-group inset class="group">
          <div class="formItem">
            <van-field
              v-model="mobileFiled2"
              name="user_mobile"
              placeholder="请输入您的账号"
            />
            <div class="error" v-if="mobileError2">{{ mobileError2 }}</div>
          </div>
          <div class="formItem">
            <van-field
              v-model="passwordFiled"
              name="user_password"
              placeholder="请输入密码"
            />
            <div class="error" v-if="passwordError">{{ passwordError }}</div>
          </div>
        </van-cell-group>
        <!-- :rules="[{ required: true, message: '请填写密码' }]" -->
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
        <div class="tab">
          <a
            v-if="activeName === 'account'"
            :class="{ active: activeName === 'mobile' }"
            @click="activeName = 'mobile'"
            href="javascript:"
            >验证码登录</a
          >
          <span>忘记密码</span>
        </div>

        <div class="agree">
          <div class="checkbox">
            <van-field name="checkbox">
              <template #input>
                <van-checkbox v-model="isAgreeFiled2" shape="square"
                  ><span>我已阅读并同意</span>
                  <a href="javascript:">《隐私条款》</a>
                  <span>和</span>
                  <a href="javascript:">《服务条款》</a></van-checkbox
                >
              </template>
            </van-field>
            <div class="error-check" v-if="isAgreeError2">
              {{ isAgreeError2 }}
            </div>
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar.vue";
import { useField, useForm } from "vee-validate";
import { Toast } from "vant";
import {
  user_mobile,
  code,
  isAgree,
  user_password,
} from "@/utils/vee-validate-schema";
import { loginByCode, loginByAccount } from "@/api/user";
import { ref } from "vue";
import useLoginAfter from "@/hooks/useLoginAfter";
export default {
  name: "UserLogin",
  components: { NavBar },
  setup() {
    const { loginSuccess } = useLoginAfter();
    // 是否是手机验证码登录
    const activeName = ref("mobile");
    // 获取手机验证码登录表单的验证相关的数据
    const { handleCodeFormSubmit, ...codeForm } = useCodeFormValidate();
    // 获取账号登录表单的验证相关的数据
    const { handleAccountFormSubmit, ...accountForm } =
      useAccountFormValidate();
    // 处理手机验证码登录
    const onCodeFormSubmit = handleCodeFormSubmit(({ user_mobile, code }) => {
      loginByCode({ user_mobile, code }).then(loginSuccess);
    });

    // 处理账号登录
    const onAccountFormSubmit = handleAccountFormSubmit(
      ({ user_mobile, user_password }) => {
        console.log(2222);
        loginByAccount({ user_mobile, user_password }).then((res) => {
          console.log(res, "res");
          if (res.status === 205) {
            Toast(res.msg);
            console.log(res.msg);
          } else if (res.status === 200) {
            loginSuccess(res);
          }
        });
      }
    );
    return {
      activeName,
      onCodeFormSubmit,
      ...codeForm,
      ...accountForm,
      onAccountFormSubmit,
    };
  },
};

// 手机验证码登录表单
function useCodeFormValidate() {
  // 创建验证码登录验证表单
  const { handleSubmit: handleCodeFormSubmit } = useForm({
    // 指定表单验证中的规则
    validationSchema: {
      // 手机号
      user_mobile,
      // 验证码
      code,
      // 是否同意协议
      isAgree,
    },
  });
  // 对手机号进行验证
  const { value: mobileFiled, errorMessage: mobileError } =
    useField("user_mobile");
  // 对验证码进行验证
  const { value: codeFiled, errorMessage: codeError } = useField("code");
  // 对是否同意协议复选框进行验证
  const { value: isAgreeFiled, errorMessage: isAgreeError } =
    useField("isAgree");
  return {
    mobileFiled,
    mobileError,
    codeFiled,
    codeError,
    isAgreeFiled,
    isAgreeError,
    handleCodeFormSubmit,
  };
}
// 账号登录表单
function useAccountFormValidate() {
  // 创建账号登录验证表单
  const { handleSubmit: handleAccountFormSubmit } = useForm({
    // 指定表单验证中的规则
    validationSchema: {
      user_mobile,
      user_password,
      isAgree,
    },
  });
  // 对手机号(账号)进行验证
  const { value: mobileFiled2, errorMessage: mobileError2 } =
    useField("user_mobile");
  // 对密码进行验证
  const { value: passwordFiled, errorMessage: passwordError } =
    useField("user_password");
  // 对是否同意协议复选框进行验证
  const { value: isAgreeFiled2, errorMessage: isAgreeError2 } =
    useField("isAgree");

  return {
    mobileFiled2,
    mobileError2,
    passwordFiled,
    passwordError,
    isAgreeFiled2,
    isAgreeError2,
    handleAccountFormSubmit,
  };
}
</script>

<style lang="less" scoped>
.userLogin {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
// 头部NavBar
.navbarBox {
  width: 100%;
  height: 2.6rem;
}
// 登录表单
.login_from {
  text-align: center;
  // 标题
  .title {
    font-size: 1.4rem;
    letter-spacing: 0.05rem;
  }
  // 副标题
  .subhead {
    font-size: 0.8rem;
    color: #a8a8a8;
    letter-spacing: 0.05rem;
  }
  // 表单
  .van-form .van-cell-group {
    margin: 3rem 2rem 0 2rem;
    overflow: hidden;
  }
  // 按钮
  .van-button {
    width: 90%;
    margin: 2rem auto 1rem;
    background-color: aliceblue;
    color: sandybrown;
    font-size: 1.3rem;
    letter-spacing: 9px;
  }
  .group .van-field {
    margin-bottom: 1rem;
    border-bottom: 0.001rem solid #e1e1e1;
  }
  .group ::v-deep(.van-field__body) {
    font-size: 0.9rem;
  }
  .formItem {
    position: relative;
  }
  .group .error {
    position: absolute;
    top: 2.5rem;
    left: 1rem;
    color: red;
    font-size: 0.7rem;
  }
  .code-login-group {
    position: relative;
  }
  // 发送验证码
  .send {
    position: absolute;
    right: 0;
    bottom: 1.5rem;
    overflow: hidden;
    width: 4rem;
    height: 1.2rem;
    font-size: 0.6rem;
    color: #459ffb;
    border: 0.1rem solid #459ffb;
    line-height: 1.2rem;
    border-radius: 1.5rem;
  }
  .tab {
    display: flex;
    justify-content: space-around;
    font-size: 0.9rem;
    margin-top: 1.3rem;
    color: #54575c;
    a {
      color: #54575c;
    }
  }
  .agree {
    position: absolute;
    bottom: 4rem;
    left: 2rem;
    // font-size: 0.6rem;
    ::v-deep(.van-field__body) {
      font-size: 0.8rem;
    }
    .checkbox {
      position: relative;
    }
    .error-check {
      position: absolute;
      top: -1rem;
      left: 1rem;
      color: red;
      font-size: 0.8rem;
    }
  }
}
</style>
